<template>
  <view>
    <u-navbar title="睡眠" back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#222" back-icon-color="#222"></u-navbar>
    <view class="" style="margin: 28rpx; background: #fff; border-radius: 20rpx; padding-bottom: 34rpx" v-for="(i, k) in list" :key="k">
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 39rpx 34rpx">
        <view class="">
          {{ i.value_four }}
        </view>
        <image src="https://wenzhen.jiangkukeji360.com/static/shop/del.png" mode="" style="width: 32rpx; height: 32rpx" @tap="del(i.id)"></image>
      </view>
      <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 0 34rpx">
        <view class="" style="font-size: 34rpx">
          {{ i.value_three }}
        </view>
        <view class="" style="font-size: 28rpx">
          {{ i.measure_time_text }}
        </view>
      </view>
    </view>
    <view class="" style="width: 100%; position: fixed; bottom: 0">
      <view class="btn" @tap="show = true">上传睡眠时间</view>
    </view>
    <u-modal v-model="show" :show-cancel-button="true" title="时间" width="660" @confirm="upload">
      <!-- <view class="" style="font-size: 32rpx;padding: 0 68rpx;">
			 	选择就诊人
			 </view>
			 <view class="" style="margin: 28rpx 42rpx;background: #F8F8F8;height: 98rpx;border-radius: 10rpx;display: flex;align-items: center;justify-content: space-between;font-size: 32rpx;">
				 <view class="" style="padding-left: 26rpx;">
				 	马小跳
				 </view>
				 <view class="" style="padding-right: 28rpx;">
				 	<u-icon name="arrow-down"></u-icon>
				 </view>
			 </view> -->
      <view class="" style="font-size: 32rpx; padding: 0 68rpx; margin-bottom: 20rpx">填写睡眠时间</view>
      <view class="" style="color: #666666; display: flex; align-items: center; justify-content: center">
        <view
          class=""
          style="background: #f8f8f8; height: 98rpx; border-radius: 10rpx; display: flex; align-items: center; justify-content: space-between; font-size: 32rpx; width: 240rpx"
          @tap="show2 = true"
        >
          <view class="" style="padding-left: 26rpx">
            {{ time }}
          </view>
          <view class="" style="padding-right: 28rpx">
            <u-icon name="arrow-down"></u-icon>
          </view>
        </view>
        <view class="" style="padding-left: 16rpx; padding-right: 16rpx">——</view>
        <view
          class=""
          style="background: #f8f8f8; height: 98rpx; border-radius: 10rpx; display: flex; align-items: center; justify-content: space-between; font-size: 32rpx; width: 240rpx"
          @tap="show1 = true"
        >
          <view class="" style="padding-left: 26rpx">
            {{ times }}
          </view>
          <view class="" style="padding-right: 28rpx">
            <u-icon name="arrow-down"></u-icon>
          </view>
        </view>
      </view>
    </u-modal>
    <u-picker mode="time" v-model="show2" :params="params" @confirm="confirm"></u-picker>
    <u-picker mode="time" v-model="show1" :params="param" @confirm="confirm1"></u-picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      background: {
        background: '#FFFFFF'
      },
      show: false,
      page: 1,
      id: null,
      list: [],
      params: {
        year: false,
        month: false,
        day: false,
        hour: true,
        minute: true,
        second: false
      },
      show2: false,
      show1: false,
      param: {
        year: false,
        month: false,
        day: false,
        hour: true,
        minute: true,
        second: false
      },
      time: '睡眠时间',
      times: '起床时间'
    };
  },
  methods: {
    weight() {
      this.api({
        url: '/api/healthy/getDataList',
        method: 'post',
        data: {
          page: this.page,
          type: this.id
        }
      }).then((res) => {
        this.list = this.list.concat(res.data);
        this.page++;
      });
    },
    confirm(e) {
      console.log(e);
      this.time = e.hour + ':' + e.minute;
    },
    confirm1(e) {
      this.times = e.hour + ':' + e.minute;
    },
    upload() {
      if (this.time == '睡眠时间') {
        uni.showToast({
          title: '请输入睡眠时间',
          icon: 'none'
        });
      } else if (this.times == '起床时间') {
        uni.showToast({
          title: '请输入起床时间',
          icon: 'none'
        });
      } else {
        this.api({
          url: '/api/healthy/addDataSeven',
          method: 'post',
          data: {
            value_one: this.time,
            value_two: this.times
          }
        }).then((res) => {
          this.page = 1;
          this.list = [];
          this.weight();
        });
      }
    },
    del(e) {
      this.api({
        url: '/api/healthy/delDataSS',
        method: 'post',
        data: {
          id: e,
          type: this.id
        }
      }).then((res) => {
        this.page = 1;
        this.list = [];
        this.weight();
      });
    }
  },
  onLoad(op) {
    this.id = op.id;
    this.weight();
  }
};
</script>

<style>
page {
  background: #f8f8f8;
}
.btn {
  margin: 99rpx 115rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #1a9eff, #0fb8ff);
  border-radius: 40rpx;
  text-align: center;
  line-height: 80rpx;
  font-size: 32rpx;
  color: #fff;
}
</style>
